<template>
	<view class="hot-main">
		<view class="goods" v-for="(item,index) in goodsList" :key="index">
			<view class="goodsImg">
				<image :src="item.pic_url" mode="aspectFill"></image>
			</view>
			<view class="goods-right">
				<view class="text">{{item.detail}}</view>
				<view class="content-detail">
					<view class="detail-explain">
						<view class="goods-info"> {{item.name}}</view>
						<text class="biao">中央空调</text>
						<text class="biao">海尔</text>
						<view class="posts">优质好贴，值得一看呀哈哈哈哈哈哈哈你那你那你以后也会永远没看见看见你回家及几口及救护</view>
					</view>
					<view class="colPhone">
						<view class="icon iconfont icon-liebiao-bodadianhua"></view>
						<view class="phone">打电话</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goodsList:Array,
			// cleaType:String
		},
		data() {
			return {

			}
		},
		watch: {
			goodsList(data){
				this.goodsList = data
				console.log("子组件中的值：",data)
			}
		},
		mounted() {
			console.log(this.goodsList)
			// console.log(this.cleaType)
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.hot-main {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		// border: 1px solid #000;
		// margin-bottom: 160rpx;//底部tabbar高度：120rpx
		.goods {
			margin-top: 20rpx;
			display: flex;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			// border: 1px solid #0f0;
			.goodsImg {
				width:600rpx;
				margin-right: 10rpx;
				image {
					width: 100%;
					height: 70%;
				}
			}
			.goods-right {
				// border: 1px solid #f00;
				.text{
					font-size: 35rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.content-detail{
					display: flex;
					.detail-explain{
						.goods-info{
							color: #797979;
							margin-top: 10rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;	
						}
						.biao{
							font-size: 26rpx;
							padding: 2rpx 6rpx;
							display: inline-block;
							margin-top: 10rpx;
							margin-right: 8rpx;
							border: 2rpx solid #e2e2e2;
							color: #cccccc;
						}
						.posts{
							color: #ffaa00;
							margin-top: 10rpx;
							font-size: 24rpx;
							background: #f9f9f9;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
						}
					}
					.colPhone{
						margin-top: 20rpx;						text-align: center;
						width:200rpx;
						// border: 1px solid #f00;
						.icon-liebiao-bodadianhua{
							font-size: 66rpx;
						}
						.phone{
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>